<template>
  <modal ref="modal" width="400px" height="150px" marginTop="20%">
    <template v-slot:header>
      {{options.title}}
    </template>
    <div class="confirm-box-content">
      <div v-html="options.message">
      </div>
      <div class="btn-container">
        <button @click="cancelHandler">{{$t('common.cancel')}}</button>
        <button role="primary" @click="confirmHandler">{{$t('common.confirm')}}</button>
      </div>
    </div>
  </modal>
</template>
<script>
import Modal from '@/components/common/Modal.vue'
export default {
  data () { return { promise: {}, options: {} } },
  components: { Modal },
  methods: {
    confirm (options) {
      this.$refs.modal.show()
      this.options = options
      return new Promise((resolve, reject) => {
        this.promise.resolve = resolve
        this.promise.reject = reject
      })
    },
    confirmHandler () {
      this.$refs.modal.hidden()
      this.promise.resolve()
    },
    cancelHandler () {
      this.$refs.modal.hidden()
      this.promise.reject(new Error('canceled'))
    }
  }
}
</script>
